<template>
  <div class="safari">
    <!-- 统一的工具栏 -->
    <div class="safari-unified-toolbar">
      <!-- 左侧：后退/前进按钮 -->
      <div class="safari-nav-controls">
        <button
          class="safari-nav-btn"
          :disabled="!canGoBack"
          @click="goBack"
          title="后退"
        >
          <svg width="10" height="16" viewBox="0 0 10 16" fill="none">
            <path d="M8 2L2 8L8 14" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </button>
        <button
          class="safari-nav-btn"
          :disabled="!canGoForward"
          @click="goForward"
          title="前进"
        >
          <svg width="10" height="16" viewBox="0 0 10 16" fill="none">
            <path d="M2 2L8 8L2 14" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </button>
      </div>

      <!-- 中间：超大地址栏 -->
      <div class="safari-unified-address-bar">
        <div class="safari-address-field" :class="{ focused: isAddressFocused }">
          <span class="safari-url-icon">
            <svg v-if="isSecureUrl" width="11" height="13" viewBox="0 0 11 13" fill="none">
              <path d="M9 5.5H8.5V3.5C8.5 2.12 7.38 1 6 1C4.62 1 3.5 2.12 3.5 3.5V5.5H3C2.45 5.5 2 5.95 2 6.5V11C2 11.55 2.45 12 3 12H9C9.55 12 10 11.55 10 11V6.5C10 5.95 9.55 5.5 9 5.5ZM6 9.5C5.45 9.5 5 9.05 5 8.5C5 7.95 5.45 7.5 6 7.5C6.55 7.5 7 7.95 7 8.5C7 9.05 6.55 9.5 6 9.5ZM7.3 5.5H4.7V3.5C4.7 2.78 5.28 2.2 6 2.2C6.72 2.2 7.3 2.78 7.3 3.5V5.5Z" fill="#34C759"/>
            </svg>
            <svg v-else width="13" height="13" viewBox="0 0 13 13" fill="none">
              <path d="M6.5 0.5C3.19 0.5 0.5 3.19 0.5 6.5C0.5 9.81 3.19 12.5 6.5 12.5C9.81 12.5 12.5 9.81 12.5 6.5C12.5 3.19 9.81 0.5 6.5 0.5ZM6.5 9.5C5.95 9.5 5.5 9.05 5.5 8.5C5.5 7.95 5.95 7.5 6.5 7.5C7.05 7.5 7.5 7.95 7.5 8.5C7.5 9.05 7.05 9.5 6.5 9.5ZM7.5 6H5.5V3H7.5V6Z" fill="currentColor" opacity="0.6"/>
            </svg>
          </span>
          <input
            ref="addressInput"
            type="text"
            v-model="addressBarValue"
            @keyup.enter="navigateTo"
            @focus="handleAddressFocus"
            @blur="handleAddressBlur"
            :placeholder="'搜索或输入网站名称'"
            class="safari-url-input"
          />
          <button
            v-if="isLoading"
            class="safari-stop-btn"
            @click="refresh"
            title="停止加载"
          >
            <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
              <rect x="3" y="3" width="6" height="6" rx="0.5" fill="currentColor"/>
            </svg>
          </button>
          <button
            v-else
            class="safari-reload-btn"
            @click="refresh"
            title="重新加载此页"
          >
            <svg width="13" height="13" viewBox="0 0 13 13" fill="none">
              <path d="M11.5 6.5C11.5 9.26 9.26 11.5 6.5 11.5C3.74 11.5 1.5 9.26 1.5 6.5C1.5 3.74 3.74 1.5 6.5 1.5C7.76 1.5 8.9 2 9.76 2.84M10.5 0.5V3.5H7.5" stroke="currentColor" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </button>
        </div>
      </div>

      <!-- 右侧：工具按钮 -->
      <div class="safari-toolbar-actions">
        <button class="safari-action-btn" @click="toggleBookmark" title="添加书签">
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
            <path d="M3 1.5H11C11.55 1.5 12 1.95 12 2.5V12.5L7 9.5L2 12.5V2.5C2 1.95 2.45 1.5 3 1.5Z" :stroke="isBookmarked ? 'none' : 'currentColor'" :fill="isBookmarked ? '#007AFF' : 'none'" stroke-width="1.1" stroke-linejoin="round"/>
          </svg>
        </button>
        <button class="safari-action-btn" title="分享">
          <svg width="13" height="15" viewBox="0 0 13 15" fill="none">
            <path d="M6.5 1V10M6.5 1L3.5 4M6.5 1L9.5 4M1.5 14H11.5C12.05 14 12.5 13.55 12.5 13V7.5H10.5M2.5 7.5H0.5V13C0.5 13.55 0.95 14 1.5 14" stroke="currentColor" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </button>
        <button class="safari-action-btn safari-new-tab-btn" @click="addNewTab" title="新建标签页">
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
            <path d="M7 2V12M2 7H12" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/>
          </svg>
        </button>
        <button class="safari-action-btn" title="显示标签页概览">
          <svg width="14" height="11" viewBox="0 0 14 11" fill="none">
            <rect x="0.5" y="0.5" width="5" height="4" rx="0.5" stroke="currentColor" stroke-width="1"/>
            <rect x="8.5" y="0.5" width="5" height="4" rx="0.5" stroke="currentColor" stroke-width="1"/>
            <rect x="0.5" y="6.5" width="5" height="4" rx="0.5" stroke="currentColor" stroke-width="1"/>
            <rect x="8.5" y="6.5" width="5" height="4" rx="0.5" stroke="currentColor" stroke-width="1"/>
          </svg>
        </button>
      </div>
    </div>

    <!-- 标签栏（在工具栏下方）-->
    <div class="safari-tabs-bar">
      <div class="safari-tabs-container">
        <div
          v-for="tab in tabs"
          :key="tab.id"
          class="safari-tab"
          :class="{ active: tab.id === activeTab }"
          @click="switchTab(tab.id)"
        >
          <span class="safari-tab-icon">{{ tab.icon }}</span>
          <span class="safari-tab-title">{{ tab.title }}</span>
          <button class="safari-tab-close" @click.stop="closeTab(tab.id)">
            <svg width="8" height="8" viewBox="0 0 8 8" fill="none">
              <path d="M1 1L7 7M7 1L1 7" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
            </svg>
          </button>
        </div>
      </div>
    </div>

    <div class="safari-content">
      <!-- 起始页 -->
      <div class="browser-page" v-if="isStartPage">
        <div class="start-page">
          <h1>个人收藏</h1>
          <div class="favorites-grid">
            <div
              v-for="favorite in favorites"
              :key="favorite.name"
              class="favorite-item"
              @click="navigateToUrl(favorite.url)"
            >
              <div class="favorite-icon">{{ favorite.icon }}</div>
              <div class="favorite-name">{{ favorite.name }}</div>
            </div>
          </div>

          <!-- 最近访问 -->
          <div v-if="recentlyVisited.length > 0" class="recent-section">
            <h2>最近访问</h2>
            <div class="recent-list">
              <div
                v-for="(item, index) in recentlyVisited"
                :key="index"
                class="recent-item"
                @click="navigateToUrl(item.url)"
              >
                <span class="recent-icon">🌐</span>
                <div class="recent-info">
                  <div class="recent-title">{{ item.title }}</div>
                  <div class="recent-url">{{ item.url }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 网页内容区域 - 使用 iframe -->
      <div class="webpage-container" v-else>
        <!-- 加载错误提示 -->
        <div v-if="loadError" class="error-page">
          <div class="error-icon">⚠️</div>
          <h2>无法打开此网页</h2>
          <p class="error-message">{{ loadError }}</p>
          <p class="error-url">{{ getCurrentTab?.url }}</p>
          <button class="retry-btn" @click="refresh">重新加载</button>
          <div class="error-tips">
            <p>提示：</p>
            <ul>
              <li>某些网站可能禁止在 iframe 中加载（X-Frame-Options 限制）</li>
              <li>请尝试访问允许嵌入的网站</li>
              <li>推荐访问：百度、必应、Wikipedia 等</li>
            </ul>
          </div>
        </div>

        <!-- iframe 加载网页 -->
        <iframe
          v-else
          ref="iframeRef"
          :src="getCurrentTab?.url"
          @load="handleIframeLoad"
          @error="handleIframeError"
          class="webpage-iframe"
          sandbox="allow-same-origin allow-scripts allow-popups allow-forms allow-downloads"
          referrerpolicy="no-referrer-when-downgrade"
        ></iframe>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch, nextTick } from 'vue'

interface Tab {
  id: number
  title: string
  url: string
  icon: string
  history: string[]
  historyIndex: number
}

interface HistoryItem {
  title: string
  url: string
  timestamp: number
}

const tabs = ref<Tab[]>([
  {
    id: 1,
    title: '起始页',
    url: 'safari://start',
    icon: '🏠',
    history: ['safari://start'],
    historyIndex: 0
  },
])

const activeTab = ref(1)
const addressBarValue = ref('safari://start')
const addressInput = ref<HTMLInputElement>()
const iframeRef = ref<HTMLIFrameElement>()
const isLoading = ref(false)
const loadError = ref('')
const isAddressFocused = ref(false)
const bookmarks = ref<string[]>([])
const recentlyVisited = ref<HistoryItem[]>([])
let nextTabId = 2

// 搜索引擎配置
const searchEngine = 'https://www.bing.com/search?q='

const getCurrentTab = computed(() =>
  tabs.value.find(t => t.id === activeTab.value)
)

const isStartPage = computed(() =>
  getCurrentTab.value?.url === 'safari://start'
)

const isSecureUrl = computed(() =>
  getCurrentTab.value?.url?.startsWith('https://')
)

const isBookmarked = computed(() =>
  bookmarks.value.includes(getCurrentTab.value?.url || '')
)

const canGoBack = computed(() => {
  const tab = getCurrentTab.value
  return tab ? tab.historyIndex > 0 : false
})

const canGoForward = computed(() => {
  const tab = getCurrentTab.value
  return tab ? tab.historyIndex < tab.history.length - 1 : false
})

const favorites = [
  { name: '百度', icon: '🔍', url: 'https://www.baidu.com' },
  { name: '必应', icon: '🔎', url: 'https://www.bing.com' },
  { name: 'GitHub', icon: '🐙', url: 'https://github.com' },
  { name: 'Vue.js', icon: '💚', url: 'https://cn.vuejs.org' },
  { name: 'Vite', icon: '⚡', url: 'https://cn.vitejs.dev' },
  { name: 'MDN', icon: '📘', url: 'https://developer.mozilla.org/zh-CN/' },
  { name: 'Wikipedia', icon: '📖', url: 'https://zh.wikipedia.org' },
  { name: 'YouTube', icon: '▶️', url: 'https://www.youtube.com' },
  { name: 'Keli', icon: '▶️', url: 'https://sakura.faruzan.com' },
]

// 监听当前标签变化，更新地址栏
watch(getCurrentTab, (tab) => {
  if (tab) {
    addressBarValue.value = isAddressFocused.value ? tab.url : getDisplayUrl(tab.url)
  }
}, { immediate: true })

function getDisplayUrl(url: string): string {
  if (url === 'safari://start') return ''
  return url
}

function isValidUrl(str: string): boolean {
  // 检查是否是有效的 URL
  try {
    // 如果包含空格，可能是搜索词
    if (str.includes(' ')) return false

    // 如果以 http:// 或 https:// 开头
    if (str.startsWith('http://') || str.startsWith('https://')) {
      new URL(str)
      return true
    }

    // 如果包含 . 且不包含空格，尝试添加 https://
    if (str.includes('.') && !str.includes(' ')) {
      new URL('https://' + str)
      return true
    }

    return false
  } catch {
    return false
  }
}

function processUrl(input: string): string {
  const trimmed = input.trim()

  if (!trimmed) return 'safari://start'

  // 如果是起始页命令
  if (trimmed === 'safari://start' || trimmed === 'home') {
    return 'safari://start'
  }

  // 如果是有效 URL
  if (isValidUrl(trimmed)) {
    // 如果没有协议，添加 https://
    if (!trimmed.startsWith('http://') && !trimmed.startsWith('https://')) {
      return 'https://' + trimmed
    }
    return trimmed
  }

  // 否则作为搜索词
  return searchEngine + encodeURIComponent(trimmed)
}

function navigateTo() {
  const tab = getCurrentTab.value
  if (!tab) return

  const processedUrl = processUrl(addressBarValue.value)

  // 如果 URL 没有变化，直接刷新
  if (tab.url === processedUrl) {
    refresh()
    return
  }

  // 清除加载错误
  loadError.value = ''
  isLoading.value = true

  // 更新标签页 URL
  tab.url = processedUrl

  // 更新历史记录
  if (tab.historyIndex < tab.history.length - 1) {
    // 如果不在历史记录末尾，删除后面的记录
    tab.history = tab.history.slice(0, tab.historyIndex + 1)
  }
  tab.history.push(processedUrl)
  tab.historyIndex = tab.history.length - 1

  // 更新标签标题
  updateTabTitle(processedUrl)

  // 添加到最近访问
  addToRecentlyVisited(processedUrl)

  // 失焦地址栏
  addressInput.value?.blur()
}

function navigateToUrl(url: string) {
  addressBarValue.value = url
  navigateTo()
}

function updateTabTitle(url: string) {
  const tab = getCurrentTab.value
  if (!tab) return

  if (url === 'safari://start') {
    tab.title = '起始页'
    tab.icon = '🏠'
  } else {
    try {
      const urlObj = new URL(url)
      tab.title = urlObj.hostname.replace('www.', '')
      tab.icon = '🌐'
    } catch {
      tab.title = '新标签页'
      tab.icon = '📄'
    }
  }
}

function addToRecentlyVisited(url: string) {
  if (url === 'safari://start') return

  const tab = getCurrentTab.value
  if (!tab) return

  // 移除重复项
  recentlyVisited.value = recentlyVisited.value.filter(item => item.url !== url)

  // 添加到开头
  recentlyVisited.value.unshift({
    title: tab.title,
    url: url,
    timestamp: Date.now()
  })

  // 只保留最近 10 条
  if (recentlyVisited.value.length > 10) {
    recentlyVisited.value = recentlyVisited.value.slice(0, 10)
  }
}

function refresh() {
  const tab = getCurrentTab.value
  if (!tab) return

  loadError.value = ''
  isLoading.value = true

  if (tab.url === 'safari://start') {
    isLoading.value = false
    return
  }

  // 重新加载 iframe
  if (iframeRef.value) {
    iframeRef.value.src = tab.url
  }
}

function goBack() {
  const tab = getCurrentTab.value
  if (!tab || !canGoBack.value) return

  tab.historyIndex--
  tab.url = tab.history[tab.historyIndex]
  updateTabTitle(tab.url)
  loadError.value = ''
  isLoading.value = true
}

function goForward() {
  const tab = getCurrentTab.value
  if (!tab || !canGoForward.value) return

  tab.historyIndex++
  tab.url = tab.history[tab.historyIndex]
  updateTabTitle(tab.url)
  loadError.value = ''
  isLoading.value = true
}

function addNewTab() {
  const newTab: Tab = {
    id: nextTabId++,
    title: '新标签页',
    url: 'safari://start',
    icon: '🏠',
    history: ['safari://start'],
    historyIndex: 0
  }
  tabs.value.push(newTab)
  switchTab(newTab.id)
}

function switchTab(tabId: number) {
  activeTab.value = tabId
  const tab = getCurrentTab.value
  if (tab) {
    addressBarValue.value = getDisplayUrl(tab.url)
    loadError.value = ''
  }
}

function closeTab(tabId: number) {
  const index = tabs.value.findIndex(t => t.id === tabId)
  if (index === -1 || tabs.value.length === 1) return

  tabs.value.splice(index, 1)

  if (activeTab.value === tabId) {
    const newIndex = Math.max(0, index - 1)
    switchTab(tabs.value[newIndex].id)
  }
}

function handleAddressFocus() {
  isAddressFocused.value = true
  const tab = getCurrentTab.value
  if (tab) {
    addressBarValue.value = tab.url
    nextTick(() => {
      addressInput.value?.select()
    })
  }
}

function handleAddressBlur() {
  isAddressFocused.value = false
  const tab = getCurrentTab.value
  if (tab) {
    addressBarValue.value = getDisplayUrl(tab.url)
  }
}

function handleIframeLoad() {
  isLoading.value = false
  loadError.value = ''

  // 尝试获取 iframe 标题（可能因为跨域限制而失败）
  try {
    if (iframeRef.value?.contentDocument?.title) {
      const tab = getCurrentTab.value
      if (tab) {
        tab.title = iframeRef.value.contentDocument.title
      }
    }
  } catch (e) {
    // 跨域限制，忽略
  }
}

function handleIframeError() {
  isLoading.value = false
  loadError.value = '该网站可能禁止在框架中显示（X-Frame-Options 限制）或加载失败'
}

function toggleBookmark() {
  const url = getCurrentTab.value?.url
  if (!url || url === 'safari://start') return

  const index = bookmarks.value.indexOf(url)
  if (index > -1) {
    bookmarks.value.splice(index, 1)
  } else {
    bookmarks.value.push(url)
  }
}

function showHistory() {
  // 显示历史记录（可以实现一个弹窗）
  console.log('历史记录:', recentlyVisited.value)
}
</script>

<style>
.safari {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #f5f5f7;
}

html.dark-mode .safari {
  background: #1c1c1e !important;
}

/* ==================== */
/* Safari 统一工具栏 - macOS 风格 */
/* ==================== */

.safari-unified-toolbar {
  height: 48px;
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(400px, 3fr) minmax(120px, 1fr);
  align-items: center;
  gap: 16px;
  padding: 0 16px 0 80px; /* 左侧留出红绿灯空间 */
  background: rgba(246, 246, 248, 0.95);
  backdrop-filter: blur(40px) saturate(190%);
  -webkit-backdrop-filter: blur(40px) saturate(190%);
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.08);
}

html.dark-mode .safari-unified-toolbar {
  background: rgba(48, 48, 52, 0.95) !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

/* 左侧导航按钮 */
.safari-nav-controls {
  display: flex;
  gap: 4px;
  align-items: center;
  justify-self: start;
}

.safari-nav-btn {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  color: #6E6E73;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

html.dark-mode .safari-nav-btn {
  color: #A1A1A6;
}

.safari-nav-btn:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.05);
  color: #1D1D1F;
}

html.dark-mode .safari-nav-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.08);
  color: #F5F5F7;
}

.safari-nav-btn:active:not(:disabled) {
  background: rgba(0, 0, 0, 0.1);
  transform: scale(0.96);
}

.safari-nav-btn:disabled {
  opacity: 0.2;
  cursor: not-allowed;
}

/* 中间地址栏区域 */
.safari-unified-address-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  justify-self: center;
  width: 100%;
  max-width: 700px;
}

.safari-address-field {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 32px;
  padding: 0 12px;
  background: rgba(255, 255, 255, 0.6);
  border: 0.5px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 0 0 0.5px rgba(255, 255, 255, 0.7) inset;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.safari-address-field:hover {
  background: rgba(255, 255, 255, 0.75);
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 
    0 2px 4px rgba(0, 0, 0, 0.06),
    0 0 0 0.5px rgba(255, 255, 255, 0.8) inset;
}

.safari-address-field.focused {
  background: rgba(255, 255, 255, 0.95);
  border-color: #007AFF;
  box-shadow: 
    0 0 0 3.5px rgba(0, 122, 255, 0.15),
    0 2px 6px rgba(0, 0, 0, 0.08);
}

html.dark-mode .safari-address-field {
  background: rgba(58, 58, 62, 0.6) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 
    0 1px 2px rgba(0, 0, 0, 0.2),
    0 0 0 0.5px rgba(255, 255, 255, 0.05) inset !important;
}

html.dark-mode .safari-address-field:hover {
  background: rgba(68, 68, 72, 0.75) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

html.dark-mode .safari-address-field.focused {
  background: rgba(58, 58, 62, 0.85) !important;
  border-color: #0A84FF !important;
  box-shadow: 
    0 0 0 3.5px rgba(10, 132, 255, 0.18),
    0 2px 6px rgba(0, 0, 0, 0.3) !important;
}

.safari-url-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #86868B;
}

.safari-url-input {
  flex: 1;
  height: 100%;
  background: transparent;
  border: none;
  outline: none;
  font-size: 12px;
  font-weight: 400;
  color: #1D1D1F;
  letter-spacing: -0.01em;
}

/* 禁用全局输入框的聚焦样式 - 因为 safari-address-field 容器已经处理了 */
.safari-url-input:focus,
.safari-url-input:hover {
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
  outline: none !important;
}

html.dark-mode .safari-url-input {
  color: #F5F5F7 !important;
}

.safari-url-input::placeholder {
  color: #86868B;
}

html.dark-mode .safari-url-input::placeholder {
  color: #8E8E93 !important;
}

.safari-reload-btn,
.safari-stop-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: #86868B;
  cursor: pointer;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.safari-reload-btn:hover,
.safari-stop-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: #1D1D1F;
}

html.dark-mode .safari-reload-btn:hover,
html.dark-mode .safari-stop-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #F5F5F7;
}

/* 右侧工具按钮 */
.safari-toolbar-actions {
  display: flex;
  gap: 2px;
  align-items: center;
  justify-self: end;
}

.safari-action-btn {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  color: #6E6E73;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

html.dark-mode .safari-action-btn {
  color: #A1A1A6;
}

.safari-action-btn:hover {
  background: rgba(0, 0, 0, 0.05);
  color: #1D1D1F;
}

html.dark-mode .safari-action-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #F5F5F7;
}

.safari-action-btn:active {
  background: rgba(0, 0, 0, 0.1);
  transform: scale(0.96);
}

/* ==================== */
/* Safari 标签栏 */
/* ==================== */

.safari-tabs-bar {
  background: rgba(235, 235, 240, 0.7);
  backdrop-filter: blur(20px);
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

html.dark-mode .safari-tabs-bar {
  background: rgba(38, 38, 42, 0.7) !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

.safari-tabs-container {
  display: flex;
  gap: 0;
  padding: 6px 80px 0; /* 左侧对齐红绿灯 */
  overflow-x: auto;
  scrollbar-width: none;
}

.safari-tabs-container::-webkit-scrollbar {
  display: none;
}

.safari-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 120px;
  max-width: 220px;
  height: 32px;
  padding: 0 12px;
  background: transparent;
  border: none;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  cursor: pointer;
  transition: background 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.safari-tab:hover:not(.active) {
  background: rgba(0, 0, 0, 0.03);
}

html.dark-mode .safari-tab:hover:not(.active) {
  background: rgba(255, 255, 255, 0.05) !important;
}

.safari-tab.active {
  background: #FFFFFF;
}

html.dark-mode .safari-tab.active {
  background: #1C1C1E !important;
}

.safari-tab.active::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: #FFFFFF;
}

html.dark-mode .safari-tab.active::before {
  background: #1C1C1E !important;
}

.safari-tab-icon {
  flex-shrink: 0;
  font-size: 12px;
}

.safari-tab-title {
  flex: 1;
  font-size: 11.5px;
  font-weight: 400;
  color: #1D1D1F;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.dark-mode .safari-tab-title {
  color: #F5F5F7 !important;
}

.safari-tab-close {
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  color: #86868B;
  opacity: 0;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.safari-tab:hover .safari-tab-close {
  opacity: 1;
}

.safari-tab-close:hover {
  background: rgba(0, 0, 0, 0.08);
  color: #1D1D1F;
}

html.dark-mode .safari-tab-close:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #F5F5F7;
}

.safari-content {
  flex: 1;
  background: white;
  overflow: hidden;
  position: relative;
}

html.dark-mode .safari-content {
  background: #1c1c1e !important;
}

.browser-page {
  height: 100%;
  padding: 40px;
  overflow-y: auto;
}

.webpage-container {
  width: 100%;
  height: 100%;
  position: relative;
  background: white;
}

.webpage-iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  background: white;
}


/* 错误页面 */
.error-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 40px;
  text-align: center;
  height: 100%;
  background: #f5f5f7;
}

.error-icon {
  font-size: 64px;
  margin-bottom: 24px;
  opacity: 0.6;
}

.error-page h2 {
  font-size: 28px;
  font-weight: 600;
  color: #1d1d1f;
  margin-bottom: 12px;
}

.error-message {
  font-size: 15px;
  color: #86868b;
  margin-bottom: 8px;
  max-width: 600px;
  line-height: 1.5;
}

.error-url {
  font-size: 13px;
  color: var(--accent-color);
  margin-bottom: 24px;
  word-break: break-all;
  max-width: 600px;
}

.retry-btn {
  padding: 10px 24px;
  background: var(--accent-color);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.retry-btn:hover {
  filter: brightness(0.95);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.3);
}

.retry-btn:active {
  transform: translateY(0);
}

.error-tips {
  margin-top: 32px;
  padding: 20px;
  background: white;
  border-radius: 12px;
  max-width: 500px;
  text-align: left;
}

.error-tips p {
  font-size: 13px;
  font-weight: 600;
  color: #1d1d1f;
  margin-bottom: 12px;
}

.error-tips ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.error-tips li {
  font-size: 13px;
  color: #86868b;
  margin-bottom: 8px;
  padding-left: 20px;
  position: relative;
}

.error-tips li::before {
  content: '•';
  position: absolute;
  left: 8px;
  color: #007aff;
}

/* 最近访问 */
.recent-section {
  margin-top: 48px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.recent-section h2 {
  font-size: 20px;
  font-weight: 600;
  color: #1d1d1f;
  margin-bottom: 20px;
}

.recent-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.recent-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.recent-item:hover {
  background: rgba(var(--accent-rgb), 0.08);
  transform: translateX(4px);
}

.recent-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.recent-info {
  flex: 1;
  min-width: 0;
}

.recent-title {
  font-size: 14px;
  font-weight: 500;
  color: #1d1d1f;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recent-url {
  font-size: 12px;
  color: #86868b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.start-page h1 {
  font-size: 28px;
  font-weight: 600;
  color: #1d1d1f;
  margin-bottom: 32px;
  text-align: center;
}

html.dark-mode .start-page h1 {
  color: #f5f5f7 !important;
}

.favorites-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 24px;
  max-width: 800px;
  margin: 0 auto;
}

.favorite-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.favorite-item:hover {
  background: rgba(var(--accent-rgb), 0.08);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.favorite-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.favorite-name {
  font-size: 13px;
  font-weight: 500;
  color: #1d1d1f;
  text-align: center;
}

html.dark-mode .favorite-name {
  color: #f5f5f7 !important;
}

.webpage-header {
  margin-bottom: 32px;
}

.webpage-header h1 {
  font-size: 32px;
  font-weight: 700;
  color: #1d1d1f;
  margin-bottom: 8px;
}

.webpage-url {
  font-size: 14px;
  color: #86868b;
}

.webpage-content {
  font-size: 16px;
  line-height: 1.6;
  color: #1d1d1f;
}

.webpage-content p {
  margin-bottom: 16px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .browser-page {
    padding: 20px;
  }

  .favorites-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 16px;
  }
}
</style>

